<!DOCTYPE HTML>
<!-- use thinkphp:layout to output pages -->
<layout name="Layout\layout" /> 
<h3 class="title1">随机练习</h3>
				<!-- <form action="{:U('Random/recordOption')}" method='POST'> -->
				<form  method='POST'>
				<div class="inbox-page">
					<h4>{$item.que_type}</h4>
					<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">																	
						<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
							<div class="mail"><p style="font-size:1.2em">{$item.question}</p></div>
						</a>												
						<div class="clearfix"> </div>						
					</div>
					<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
						<div class="mail "> <input type="checkbox" class="checkbox" id="optA" onclick="radio(this);"> </div>												
						<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
							<div class="mail"><p>{$item.opta}</p></div>
						</a>												
						<div class="clearfix"> </div>						
					</div>
					<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
						<div class="mail "> <input type="checkbox" class="checkbox" id="optB" onclick="radio(this);"> </div>												
						<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
							<div class="mail"><p>{$item.optb}</p></div>
						</a>												
						<div class="clearfix"> </div>						
					</div>
					<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
						<div class="mail "> <input type="checkbox" class="checkbox" id="optC" onclick="radio(this);"> </div>												
						<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
							<div class="mail"><p>{$item.optc}</p></div>
						</a>												
						<div class="clearfix"> </div>						
					</div>
					<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
						<div class="mail "> <input type="checkbox" class="checkbox" id="optD" onclick="radio(this);"> </div>												
						<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
							<div class="mail"><p>{$item.optd}</p></div>
						</a>												
						<div class="clearfix"> </div>						
					</div>														
				</div>
				<div class="inbox-page" style="display:none" id="analysis">				    
					<h4 style="margin-top:3%">答案及解析</h4>
					<div class="inbox-row widget-shadow" id="analysis1" role="tablist" aria-multiselectable="true">	
					</div>
					<div class="inbox-row widget-shadow" id="analysis2" role="tablist" aria-multiselectable="true">	
					</div>
				</div>
				<div class="mail-body" style="border:none;margin:0px;margin-right:10%;padding-left: 50%;text-align:right;">							
						<input type="submit" id="mark" value="Mark" style="display:none">
						<input type="submit" id="submit" value="Confirm" >				
						<input type="submit" id="next" value="Next" style="display:none">
						<input name="openid" id="openid" value="{$openid}" type="hidden"  />
						<input name="itemid" id="itemid" value="{$item.id}" type="hidden" />									
						<input name="starttime" id="starttime" value="{$starttime}" type="hidden" />									
				</div>				
				</form>
				<!-- display right answer & explain-->
				
				<!-- display right answer & explain end-->
				<script src="__PUBLIC__/js/classie.js"></script>
		<script>
			
			function radio(checkbox) {
                $('input[type=checkbox]').prop('checked', false);
				$(checkbox).prop('checked',true);
				answer = $(checkbox).attr("id");
            }
			function changeMark()
			{																								
				$('#mark').attr("disabled","disabled");																	
				$('#mark').css('color','#777');	
							
			}
			$("#submit").click(function(event){
				event.preventDefault();
				if(answer=='no'){
					alert('Please select one option!');
					return false;
				}
				var ajaxData ={};
				ajaxData['itemid'] = $('#itemid').val();
				ajaxData['openid'] = $('#openid').val();				
				ajaxData['starttime'] = $('#starttime').val();				
				ajaxData['answer'] = answer;				
				ajaxData['__hash__'] = $('[name=__hash__]').attr('content');		
				//ajaxData['__hash__'] = document.getElementsByName("__hash__")[0].content;		
				$.ajax({
                    cache:false,
                    type:"POST",
					//async:false,
					//contentType:
                    url:"{:U('Random/getRightans')}",
                    dataType:"json",
                    data: ajaxData,
                    timeout:30000,
                    error:function(XMLHttpRequest, textStatus,errorThrown){                      
						return false;
                    },
                    success:function(jsApiParameters){
						if(jsApiParameters=='非法的请求方式' || typeof(jsApiParameters) == "undefined") {alert("网络问题，请稍后答题！");return false;}										
						var rightans     = "#opt"+jsApiParameters['rightans'];
						var que_analysis = jsApiParameters['que_analysis'];						
						$('#analysis').show();
						if($(rightans).prop('checked')){
							var tmp = "<h3 style=\"color:red\" id=\"right_lab\" value=\"1\">正确</h3>";
						}else var tmp = "<h3 style=\"color:red\" id=\"right_lab\" value=\"0\">错误</h3>";
						$('#analysis1').html(tmp+"<p>参考答案："+jsApiParameters['rightans']+"</p>");
						$('#analysis2').html("<p>解析：</p>"+"<h3>"+que_analysis);
						$('#next').show();
						if({$iscollect}) {					
							$('#mark').val("Marked");
							changeMark();
						} 						
						$('#mark').show();																		
						$('#submit').css('display','none');																		
                    }
                });												
			});
			$("#mark").click(function(event){
				event.preventDefault();				
				var ajaxData ={};
				ajaxData['itemid'] = $('#itemid').val();
				ajaxData['openid'] = $('#openid').val();											
				ajaxData['right_lab'] = $('#right_lab').val();				
				ajaxData['__hash__'] = $('[name=__hash__]').attr('content');		
				//ajaxData['__hash__'] = document.getElementsByName("__hash__")[0].content;		
				$.ajax({
                    cache:false,
                    type:"POST",
                    url:"{:U('Random/setCollect')}",
                    dataType:"json",
                    data: ajaxData,
                    timeout:30000,                  
                    success:function(jsApiParameters){
						if(jsApiParameters=='非法的请求方式' || typeof(jsApiParameters) == "undefined") {alert("网络问题，请稍后答题！");return false;}										
						var markcount = jsApiParameters;
						
						$('#mark').val("Marked"+"("+markcount+")");	
						changeMark();							
                    }
                });												
			});
			
			
		</script>